<template>
    <!-- 视频ID、视频标题、视频作者、审核状态、发布时间、查看/审核 -->
    <el-table :data="tableData" class="custom-table" size="large" align="center">
        <el-table-column label="视频ID" width="180">
            <template #default="scope">
                <span style="margin-left: 10px">{{ scope.row.videoId }}</span>
            </template>
        </el-table-column>
        <el-table-column label="视频标题" width="250">
            <template #default="scope">
                <span>{{ scope.row.videoTitle }}</span>
            </template>
        </el-table-column>
        <el-table-column label="视频作者" width="180">
            <template #default="scope">
                <span>{{ scope.row.author }}</span>
            </template>
        </el-table-column>

        <el-table-column prop="tag" label="审核状态" width="100">
            <template #default="scope">
                <el-tag type="primary" effect="dark" v-if="scope.row.status === '0'">待审核</el-tag>
                <el-tag type="success" effect="dark" v-if="scope.row.status === '1'">已通过</el-tag>
                <el-tag type="danger" effect="dark" v-if="scope.row.status === '2'">未通过</el-tag>
            </template>
        </el-table-column>

        <el-table-column label="发布时间" width="300">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.subTime }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" type="primary" @click="handleCheck(scope.row)"
                    v-if="scope.row.status !== '0'">查看</el-button>
                <el-button size="small" type="primary" @click="handleCheck(scope.row)" v-else>审核</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page">
        <!-- 因为JPA的分页策略是从0开始，因此传给后台的数据需要-1 -->
        <el-pagination :total="total" background=true layout="total, prev, pager, next, jumper" @current-change="changePage"
            :page-size="pageParam.pageSize" :current-page="pageParam.pageNum + 1" />
    </div>

    <el-dialog v-model="videoDialog" :title="videoDialogTitle" align-center>
        <video id="videoTag" class="video-js vjs-default-skin" :poster="videoDialogThumbnail" controls preload="auto"
            width="100%" height="400">

            当前浏览器不支持，视频直接播放。请更新或更换浏览器。
        </video>


        <div>
            <h4>作者</h4>
            <div>{{ videoDialogAuthor }}</div>
        </div>

        <div>
            <h4>视频类型</h4>
            <div>{{ videoDialogType }}</div>
        </div>

        <div>
            <h4>简介</h4>
            <div>{{ videoDialogDescribe }}</div>
        </div>

        <div>
            <h4>视频标签</h4>
            <el-tag v-for="item in videoDialogLabel" :key="item" type="info" effect="dark" class="video-label">
                {{ item }}
            </el-tag>
        </div>

        <template #footer v-if="videoDialogStatus === '0'">
            <div>
                <el-button type="success" @click="handleVideoModerate(true)">通过审核</el-button>
                <el-button type="danger" @click="handleVideoModerate(false)">不通过审核</el-button>
            </div>
        </template>

        <el-dialog v-model="reasonDialog" title="理由" width="500" draggable>

            <el-select v-model="reasonSelect" multiple placeholder="快捷选择" style="width: 100%; margin-bottom: 10px;">
                <el-option label="违反版权：包含未经授权使用的受版权保护的音乐、电影片段、图像等内容。" value="违反版权：包含未经授权使用的受版权保护的音乐、电影片段、图像等内容。" />
                <el-option label="色情或成人内容：包含露骨的性行为、裸露的身体部位、色情画面或性暗示。" value=" 色情或成人内容：包含露骨的性行为、裸露的身体部位、色情画面或性暗示。 " />
                <el-option label="暴力或攻击性内容：包含暴力行为、虐待、欺凌、仇恨言论等具有攻击性的内容。" value=" 暴力或攻击性内容：包含暴力行为、虐待、欺凌、仇恨言论等具有攻击性的内容。 " />
                <el-option label="政治敏感性：涉及政治敏感话题、政治宣传或违反特定地区的政策规定。" value=" 政治敏感性：涉及政治敏感话题、政治宣传或违反特定地区的政策规定。 " />
                <el-option label="仇恨言论：包含对特定群体或个人的歧视、侮辱、骚扰或辱骂。" value=" 仇恨言论：包含对特定群体或个人的歧视、侮辱、骚扰或辱骂。 " />
                <el-option label="自残或自杀：涉及自我伤害、自残、自杀或鼓励这些行为的内容。" value=" 自残或自杀：涉及自我伤害、自残、自杀或鼓励这些行为的内容。 " />
                <el-option label="危险或违法行为：涉及非法活动、危险行为，如毒品、武器、暴力犯罪等。" value=" 危险或违法行为：涉及非法活动、危险行为，如毒品、武器、暴力犯罪等。 " />
                <el-option label="广告或垃圾信息：用于推广商品、服务或其他商业宣传，或者包含垃圾邮件或欺诈性信息。"
                    value=" 广告或垃圾信息：用于推广商品、服务或其他商业宣传，或者包含垃圾邮件或欺诈性信息。 " />
                <el-option label="骚扰或隐私侵犯：涉及对他人的骚扰、侵犯隐私或违反个人信息保护法规。" value=" 骚扰或隐私侵犯：涉及对他人的骚扰、侵犯隐私或违反个人信息保护法规。 " />
                <el-option label="欺诈或虚假信息：包含虚假宣传、欺诈行为或误导性信息。" value=" 欺诈或虚假信息：包含虚假宣传、欺诈行为或误导性信息。 " />
            </el-select>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="clearSelect()">取消</el-button>
                    <el-button type="primary" @click="subUnpass()">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </el-dialog>
</template>
  
<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'
import { onMounted, reactive, ref, watch } from 'vue';
import { getVideoModerationList, getVideoDetail, moderateVideo } from '../api/video'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus';

import videojs from "video.js"
import "video.js/dist/video-js.css"
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
videojs.addLanguage('zh-CN', video_zhCN)


interface Video {
    videoId: string
    videoTitle: string
    author: string
    status: string
    subTime: string
}

const tableData = reactive<Video[]>([])

const total = ref(0)

const pageParam = reactive({
    pageNum: 0,
    pageSize: 10
})

const fetchTableData = async () => {
    try {
        const res = await getVideoModerationList(pageParam)

        total.value = res.data.totalElements

        tableData.length = 0; // 清空tableData内容
        for (let i = 0; i < res.data.content.length; i++) {
            let item = res.data.content[i];
            tableData.push({
                videoId: item.videoId,
                videoTitle: item.videoTitle,
                author: item.author,
                status: item.status,
                subTime: dayjs(item.publishTime).format('YYYY-MM-DD HH:mm:ss')
            });
        }
    } catch (error) {
        console.error(error);
    }
}

onMounted(fetchTableData)

const changePage = (val: Number) => {
    pageParam.pageNum = Number(val) - 1
    fetchTableData()
}

const videoDialogVideoId = ref('')
const videoDialogUserId = ref(0)
const videoDialog = ref(false)
const videoDialogTitle = ref('')
const videoDialogSrc = ref('')
const videoDialogThumbnail = ref('')
const videoDialogDescribe = ref('')
const videoDialogType = ref('')
const videoDialogLabel = ref([])
const videoDialogAuthor = ref('')
const videoDialogStatus = ref('')

const handleCheck = (row: Video) => {
    videoDialog.value = true
    videoDialogStatus.value = row.status
    videoDialogVideoId.value = row.videoId

    getVideoDetail(row.videoId).then((res) => {
        let item = res.data
        videoDialogUserId.value = item.userId
        videoDialogTitle.value = item.videoTitle
        videoDialogSrc.value = item.url
        videoDialogThumbnail.value = item.thumbnail
        videoDialogDescribe.value = item.introduction
        videoDialogType.value = item.videoType
        videoDialogAuthor.value = item.author
        videoDialogLabel.value = item.labelList
        initVideoSource()
    })
}

function initVideoSource () {

  videojs('videoTag', {
    controls: true, // 是否显示控制条
    preload: 'auto',
    autoplay: false,
    fluid: true, // 自适应宽高
    language: 'zh-CN', // 设置语言
    muted: false, // 是否静音
    inactivityTimeout: false,
    controlBar: { // 设置控制条组件
       children: [
        { name: 'playToggle' }, // 播放按钮
        { name: 'currentTimeDisplay' }, // 当前已播放时间
        { name: 'progressControl' }, // 播放进度条
        { name: 'durationDisplay' }, // 总时间
        {
          name: 'volumePanel', // 音量控制
          inline: false, // 不使用水平方式
        },
        { name: 'FullscreenToggle' }, // 全屏
      ],
    },
    sources: [   // 视频播放资源
      {
         src: videoDialogSrc.value,
         type: 'application/x-mpegURL',
      },
    ],
  })
}

const reasonDialog = ref(false)

const reasonSelect = ref('')

const handleVideoModerate = (isPass) => {
    if (isPass) {
        moderateVideo(videoDialogUserId.value, videoDialogVideoId.value, isPass, undefined).then(() => {
            ElMessage.success('审核成功')
            videoDialog.value = false
        })
    } else reasonDialog.value = true
}

const clearSelect = () => {
    reasonDialog.value = false
    reasonSelect.value = ''
}

const subUnpass = () => {
    moderateVideo(videoDialogUserId.value, videoDialogVideoId.value, false, reasonSelect.value).then(() => {
        ElMessage.success('审核成功')
        clearSelect()
        videoDialog.value = false
    })
}

watch(videoDialog, (newVal, _oldVal) => {
    if (!newVal) {
        videoDialogVideoId.value = ''
        videoDialogUserId.value = 0;
        videoDialogStatus.value = ''
        videoDialogTitle.value = ''
        videoDialogSrc.value = ''
        videoDialogThumbnail.value = ''
        videoDialogDescribe.value = ''
        videoDialogType.value = ''
        videoDialogAuthor.value = ''
        videoDialogLabel.value = []
        fetchTableData()
    }
})

</script>

<style lang="scss" scoped>
.custom-table {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

h4 {
    cursor: default;
    margin-bottom: 5px
}

.video-label {
    margin-left: 10px;
}

.page {
    margin-top: 20px
}

.el-pagination {
    justify-content: center;
    align-items: center;
}
</style>